import React from 'react';
import { provinceLargeScreen } from '../services';
import { Total, LinesMap, InsCapacity, InsHours, SupplyChart, PowerHistory } from './components';
import mockLayout from './mock';
import styles from './index.less';

export default () => {
  const [result, setResult] = React.useState(null);

  React.useEffect(() => {
    fetch();
  }, []);

  const fetch = async () => {
    const res = await provinceLargeScreen();
    res.layout = mockLayout;
    // if (!!res?.layout) {
    //   try {
    //     res.layout = JSON.parse(res.layout);
    //   } catch (error) {}
    // }
    setResult(res);
  };

  return (
    <div className={styles.main}>
      <div className={styles.group1}>
        <div className={styles.group1_l}>
          <div style={{ height: 80 }}>
            <Total
              dataSource={{
                ...(result?.provinceElecQuantity || {}),
                ...(result?.societyElecBody || {}),
              }}
            />
          </div>
          <div className={styles.flex} style={{ height: 283 }}>
            <div>
              <InsCapacity
                dataSource={{
                  ...(result?.provinceInstalledCapacityBody || {}),
                }}
              />
            </div>
            <div>
              <InsHours
                dataSource={{
                  ...(result?.utilizationHoursBody || {}),
                }}
              />
            </div>
          </div>
          <div style={{ height: 313 }}>
            <SupplyChart dataSource={result?.layout?.yearPriceList || []} />
          </div>
        </div>
        <div className={styles.group1_r}>
          <LinesMap dataSource={result?.dataOutTransLine?.dataList || []} />
        </div>
      </div>
      <div className={styles.group2} style={{ height: 244 }}>
        <PowerHistory />
      </div>
    </div>
  );
};
